<template>
    <div>
        <template v-for="menu in menus">
            <el-submenu :key="menu.id" :index="menu.id + ''" v-if="menu.children">
                <template slot="title">
                    <i :class="menu.icon"></i>
                    <span slot="title">{{ menu.name }}</span>
                </template>
                <navTree :menus="menu.children"></navTree>
            </el-submenu>
            <el-menu-item v-else :index="menu.path" :key="menu.id" @click="selectMenu(menu.path,menu.name)">
                <i :class="menu.icon"></i>
                <span slot="title">{{ menu.name }}</span>
            </el-menu-item>
        </template>
    </div>
</template>
<script>
export default {
    name: "navTree",
    props: {
        menus: {
            type: Array
        }
    },
    methods: {
        selectMenu(path,title) {
            window.sessionStorage.setItem("menuPath", path);
        }
    }
};
</script>
<style scoped lang="less">
// @import "./leftMenu.less";
// 水平样式 */
.el-menu--horizontal>div>.el-submenu { 
   
   float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal>div>.el-menu-item { 
  
   float: left;
   height: 60px;
   line-height: 60px;
   margin: 0;
   border-bottom: 2px solid transparent;
   color: #909399;
}
</style>
